var c = document.getElementById("bgr-canv");
var c1 = document.getElementById("main-canv");
var field_cnt = 20;
var field_size = 20;

var width = c.width;
var height = c.height;

$(document).ready(function(){
	getMap();
	getPlayerStart();
});

function getMap(){
	var ctx = c.getContext('2d');
	$.ajax({
		type: "POST",
		url: "control.php",
		dataType: "json",
		data: "t=0",
		success: function (rsp){
			
			for (var i = 0;i < field_cnt; i++){
				for (var j = 0;j < field_cnt; j++){
					var x0 = i*field_cnt;
					var y0 = j*field_cnt;
					if (x0 == 0) x0 = 1;
					if (y0 == 0) y0 = 1;
						
					switch (rsp[j][i]){
						case 0:
							ctx.fillStyle = "rgb(230,230,230)";
							break;
								
						case 1:
							ctx.fillStyle = "rgb(180,180,180)";
							break;
								
						case 2:
							break;
							
						case 3:
							ctx.fillStyle = "rgb(51,51,153)";
							break;
						}
						
						ctx.fillRect(x0,y0,(i+1)*20,(j+1)*20);
					}
				}
			}
	});
}

function getPlayerStart(){
	var ctxn = c1.getContext('2d');
	
	$.ajax({
		type:"POST",
		url: "control.php",
		dataType: "text",
		data: "t=2",
		success: function(rsp){
			var coord = rsp.split(",");
			var x0 = parseInt(coord[0]);
			var y0 = parseInt(coord[1]);
				
			ctxn.fillStyle = "rgb(100,100,100)";
			ctxn.clearRect(1,1,width, height);				
			ctxn.fillRect(x0*field_size, y0*field_size, field_size, field_size);
				
			return false;
		}
	});
}

function move(m){
	var ctxn = c1.getContext('2d');
		$.ajax({
			type:"POST",
			url: "control.php",
			dataType: "text",
			data: "t=1&m="+m,
			success: function(rsp){
				var coord = rsp.split(",");
				var x0 = parseInt(coord[0]);
				var y0 = parseInt(coord[1]);
								
				ctxn.fillStyle = "rgb(100,100,100)";
				ctxn.clearRect(0,0,width, height);				
				ctxn.fillRect(x0*field_size, y0*field_size, field_size, field_size);
				
			}
	});
}


